<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能旅行管家 - TravelMaster</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f1c40f;
            --danger-color: #e74c3c;
            --background-color: #f9f9f9;
            --text-color: #333;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }

        body {
            background: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
        }

        .password-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .password-box {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            text-align: center;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
        }

        .mode-switch {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        .category-nav {
            display: flex;
            gap: 10px;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .category-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: var(--secondary-color);
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .category-btn.active {
            background: var(--primary-color);
        }

        .add-item-form {
            display: flex;
            gap: 10px;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .input-group {
            flex: 1;
            min-width: 250px;
        }

        input, select, button {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100%;
        }

        button {
            background: var(--secondary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            opacity: 0.9;
        }

        .item-list {
            display: grid;
            gap: 10px;
            margin-bottom: 2rem;
        }

        .item-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 15px;
            transition: transform 0.2s;
        }

        .item-card:hover {
            transform: translateY(-2px);
        }

        .item-status {
            width: 25px;
            height: 25px;
            border: 2px solid #ddd;
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
        }

        .item-status.checked {
            background: var(--success-color);
            border-color: var(--success-color);
        }

        .item-info {
            flex: 1;
        }

        .item-actions {
            display: flex;
            gap: 10px;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            gap: 10px;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        /* 新增样式 */
        .mobile-category {
            display: none;
            margin-bottom: 1rem;
        }
        
        .category-select {
            width: 150px;
            padding: 8px;
            border-radius: 5px;
        }

        .unprepared {
            background-color: #ffe5e5;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .depart-btn {
            background: var(--danger-color);
            margin-top: 1rem;
        }

        /* 电脑端布局 */
        @media (min-width: 769px) {
            .item-list {
                grid-template-columns: repeat(2, 1fr);
            }
            .category-nav {
                flex-wrap: wrap;
                gap: 8px;
            }
            .category-btn:not(:first-child) {
                width: calc(24% - 10px);
                margin: 0 2px;
            }
        }

        /* 手机端布局 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .category-nav {
                display: none !important;
            }
            .mobile-category {
                display: block;
            }
            .add-item-form {
                flex-direction: column;
            }
            .item-card {
                width: 100%;
                margin: 5px 0;
            }
            .mode-switch {
                position: static;
                transform: none;
                margin-top: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="password-overlay">
        <div class="password-box">
            <h2>旅行管家认证</h2>
            <input type="password" id="passwordInput" placeholder="请输入访问密码">
            <button onclick="checkPassword()" style="margin-top: 1rem;">解锁</button>
        </div>
    </div>

    <div class="container" style="display: none;">
        <div class="header">
            <h1>智能旅行管家 🧳</h1>
            <div class="mode-switch">
                <button onclick="toggleMode()" id="modeBtn">切换到返程模式</button>
            </div>
        </div>

        <div class="mobile-category">
            <select class="category-select" onchange="setCategory(this.value)">
                <option value="所有">所有分类</option>
                <option value="日常用品">日常用品</option>
                <option value="电子设备">电子设备</option>
                <option value="重要文件">重要文件</option>
                <option value="衣物鞋帽">衣物鞋帽</option>
            </select>
        </div>

        <div class="category-nav" id="categoryNav"></div>

        <form class="add-item-form" onsubmit="addItem(event)">
            <div class="input-group">
                <input type="text" id="itemName" placeholder="添加新物品" required>
            </div>
            <div class="input-group">
                <select id="itemCategory">
                    <option value="日常用品">日常用品</option>
                    <option value="电子设备">电子设备</option>
                    <option value="重要文件">重要文件</option>
                    <option value="衣物鞋帽">衣物鞋帽</option>
                </select>
            </div>
            <button type="submit">添加物品</button>
        </form>

        <div class="stats">
            <div>总物品：<span id="totalItems">0</span></div>
            <div>已准备：<span id="preparedItems">0</span></div>
            <div>未准备：<span id="unpreparedItems">0</span></div>
        </div>

        <div class="item-list" id="itemList"></div>

        <div class="controls">
            <button class="depart-btn" onclick="highlightUnprepared()"><i class="fas fa-plane"></i> 出发检查</button>
            <button onclick="exportData()"><i class="fas fa-download"></i> 导出数据</button>
            <button onclick="importData()"><i class="fas fa-upload"></i> 导入数据</button>
            <button onclick="clearAll()"><i class="fas fa-trash"></i> 清空全部</button>
        </div>
    </div>

    <script>
        let isReturnMode = false;
        let currentCategory = '所有';
        const categories = ['所有', '日常用品', '电子设备', '重要文件', '衣物鞋帽'];
        let items = JSON.parse(localStorage.getItem('travelItems')) || [];

        function checkPassword() {
            const password = document.getElementById('passwordInput').value;
            if (password === 'admin123') {
                document.querySelector('.password-overlay').style.display = 'none';
                document.querySelector('.container').style.display = 'block';
                initApp();
            } else {
                alert('密码错误，请重试！');
            }
        }

        function isMobile() {
            return window.innerWidth <= 768;
        }

        function initApp() {
            renderCategories();
            renderItems();
            updateStats();
        }

        function renderCategories() {
            if(isMobile()) return;
            
            const nav = document.getElementById('categoryNav');
            nav.innerHTML = categories.map(cat => `
                <button class="category-btn ${cat === currentCategory ? 'active' : ''}" 
                        onclick="setCategory('${cat}')"
                        style="${cat !== '所有' ? 'width: calc(24% - 10px); margin: 0 2px;' : ''}">
                    ${cat}
                </button>
            `).join('');
        }

        function setCategory(cat) {
            currentCategory = cat;
            renderCategories();
            renderItems();
            if(isMobile()) {
                document.querySelector('.category-select').value = cat;
            }
        }

        function addItem(e) {
            e.preventDefault();
            const newItem = {
                id: Date.now(),
                name: document.getElementById('itemName').value,
                category: document.getElementById('itemCategory').value,
                packed: false,
                returned: false,
                createdAt: new Date()
            };
            items.push(newItem);
            saveData();
            renderItems();
            updateStats();
            e.target.reset();
        }

        function renderItems() {
            const filtered = items.filter(item => 
                currentCategory === '所有' || item.category === currentCategory
            );
            
            const list = document.getElementById('itemList');
            list.innerHTML = filtered.map(item => `
                <div class="item-card" data-id="${item.id}">
                    <div class="item-status ${getStatusClass(item)}" 
                         onclick="toggleStatus(${item.id})"></div>
                    <div class="item-info">
                        <h3>${item.name}</h3>
                        <small>分类：${item.category} • 添加时间：${new Date(item.createdAt).toLocaleString()}</small>
                    </div>
                    <div class="item-actions">
                        <button onclick="editItem(${item.id})"><i class="fas fa-edit"></i></button>
                        <button onclick="deleteItem(${item.id})"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
            `).join('');
        }

        function getStatusClass(item) {
            return isReturnMode ? 
                (item.returned ? 'checked' : '') : 
                (item.packed ? 'checked' : '');
        }

        function toggleStatus(id) {
            const item = items.find(i => i.id === id);
            if (isReturnMode) {
                item.returned = !item.returned;
            } else {
                item.packed = !item.packed;
            }
            saveData();
            renderItems();
            updateStats();
        }

        function highlightUnprepared() {
            const list = document.getElementById('itemList');
            list.querySelectorAll('.item-card').forEach(card => {
                const id = parseInt(card.dataset.id);
                const item = items.find(i => i.id === id);
                card.classList.toggle('unprepared', !item.packed && !isReturnMode);
            });
        }

        function editItem(id) {
            const item = items.find(i => i.id === id);
            const newName = prompt('修改物品名称：', item.name);
            if (newName) {
                item.name = newName;
                saveData();
                renderItems();
            }
        }

        function deleteItem(id) {
            if (confirm('确定要删除这个物品吗？')) {
                items = items.filter(i => i.id !== id);
                saveData();
                renderItems();
                updateStats();
            }
        }

        function updateStats() {
            document.getElementById('totalItems').textContent = items.length;
            const prepared = items.filter(i => i.packed).length;
            document.getElementById('preparedItems').textContent = prepared;
            document.getElementById('unpreparedItems').textContent = items.length - prepared;
        }

        function toggleMode() {
            isReturnMode = !isReturnMode;
            document.getElementById('modeBtn').textContent = 
                isReturnMode ? '切换到出发模式' : '切换到返程模式';
            renderItems();
        }

        function exportData() {
            const data = JSON.stringify(items);
            const blob = new Blob([data], {type: 'text/plain'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `travel-list_${new Date().toISOString().slice(0,10)}.txt`;
            a.click();
        }

        function importData() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.txt';
            input.onchange = e => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = () => {
                    try {
                        items = JSON.parse(reader.result);
                        saveData();
                        renderItems();
                        updateStats();
                        alert('数据导入成功！');
                    } catch {
                        alert('文件格式错误！');
                    }
                };
                reader.readAsText(file);
            };
            input.click();
        }

        function clearAll() {
            if (confirm('确定要清空所有物品吗？此操作不可恢复！')) {
                items = [];
                saveData();
                renderItems();
                updateStats();
            }
        }

        function saveData() {
            localStorage.setItem('travelItems', JSON.stringify(items));
        }

        // 初始化示例数据
        if (!items.length) {
            items = [
                {id: 1, name: '护照', category: '重要文件', packed: false, returned: false, createdAt: new Date()},
                {id: 2, name: '手机充电器', category: '电子设备', packed: true, returned: false, createdAt: new Date()}
            ];
            saveData();
        }

        // 窗口大小变化时自动刷新布局
        window.addEventListener('resize', () => {
            renderCategories();
            renderItems();
        });
    </script>
</body>
</html>
